<template>
  <div class="order-detail-container">
    <el-card class="order-detail-card">
      <template #header>
        <div class="card-header">
          <div class="header-left">
            <el-button link @click="goBack">
              <el-icon><ArrowLeft /></el-icon>
              返回列表
            </el-button>
            <el-divider direction="vertical" />
            <span class="title">订单详情</span>
          </div>
          <el-tag :type="getPaymentStatusType(orderInfo?.tripOrder?.paymentStatus)" size="large">
            {{ formatPaymentStatus(orderInfo?.tripOrder?.paymentStatus) }}
          </el-tag>
        </div>
      </template>

      <div v-loading="loading">
        <!-- 拼车信息 -->
        <el-descriptions title="拼车信息" :column="2" border>
          <el-descriptions-item label="拼车标题" :span="2">{{ orderInfo?.carpoolInfo?.title }}</el-descriptions-item>
          <el-descriptions-item label="拼车描述" :span="2">{{ orderInfo?.carpoolInfo?.description }}</el-descriptions-item>
          <el-descriptions-item label="计划出发时间">
            {{ formatDateTime(orderInfo?.carpoolInfo?.plannedStartTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="总距离">{{ orderInfo?.carpoolInfo?.totalDistance }} 公里</el-descriptions-item>
          <el-descriptions-item label="预计时长">{{ orderInfo?.carpoolInfo?.estimatedDuration }} 分钟</el-descriptions-item>
          <el-descriptions-item label="理想人数">{{ orderInfo?.carpoolInfo?.idealPersonCount }} 人</el-descriptions-item>
          <el-descriptions-item label="当前人数">{{ orderInfo?.carpoolInfo?.passengerCount }} 人</el-descriptions-item>
          <el-descriptions-item label="定价方式">
            {{ orderInfo?.carpoolInfo?.pricingMethod === 1 ? '一口价' : '按公里计费' }}
          </el-descriptions-item>
          <el-descriptions-item label="总价">¥ {{ formatNumber(orderInfo?.carpoolInfo?.totalPrice) }}</el-descriptions-item>
        </el-descriptions>

        <!-- 订单信息 -->
        <el-descriptions title="订单信息" :column="2" border class="mt-20">
          <el-descriptions-item label="订单编号" :span="2">
            <span class="order-number">{{ orderInfo?.tripOrder?.id }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="下单时间">
            {{ formatDateTime(orderInfo?.tripOrder?.orderGenerationTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="支付时间">
            {{ orderInfo?.tripOrder?.paymentTime ? formatDateTime(orderInfo?.tripOrder?.paymentTime) : '未支付' }}
          </el-descriptions-item>
          <el-descriptions-item label="支付金额">
            <span class="amount">¥ {{ formatNumber(orderInfo?.tripOrder?.paymentAmount) }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="支付方式">
            {{ formatPaymentMethod(orderInfo?.tripOrder?.paymentMethod) }}
          </el-descriptions-item>
        </el-descriptions>

        <!-- 途经点信息 -->
        <el-descriptions title="途经点信息" :column="1" border class="mt-20">
          <el-descriptions-item label="行程路线" :span="1">
            <el-steps :active="orderInfo?.waypointInfoList?.length" finish-status="success">
              <el-step 
                v-for="point in sortedWaypoints" 
                :key="point.id"
                :title="point.locationName"
                :description="formatWaypointType(point.waypointType) + ' · ' + point.passengerCount + '人'"
              />
            </el-steps>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getOrderDetail } from '@/api/order'
import { ElMessage } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'
import dayjs from 'dayjs'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const orderInfo = ref(null)

// 获取订单详情
const fetchOrderDetail = async () => {
  loading.value = true
  try {
    const res = await getOrderDetail(route.params.id)
    if (res.code === 1) {
      orderInfo.value = res.data
    } else {
      ElMessage.error(res.msg || '获取订单详情失败')
    }
  } catch (error) {
    console.error('获取订单详情失败：', error)
    ElMessage.error('获取订单详情失败')
  } finally {
    loading.value = false
  }
}

// 返回列表页
const goBack = () => {
  router.back()
}

// 格式化日期时间
const formatDateTime = (date) => {
  if (!date) return '--'
  return dayjs(date).format('YYYY-MM-DD HH:mm')
}

// 格式化金额
const formatNumber = (num) => {
  if (!num) return '0.00'
  return Number(num).toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  })
}

// 格式化支付方式
const formatPaymentMethod = (method) => {
  const methodMap = {
    1: '支付宝',
    2: '微信',
    3: '银行卡'
  }
  return methodMap[method] || '未知'
}

// 格式化支付状态
const formatPaymentStatus = (status) => {
  const statusMap = {
    0: '未支付',
    1: '已支付',
    2: '支付失败'
  }
  return statusMap[status] || '未知'
}

// 获取支付状态标签类型
const getPaymentStatusType = (status) => {
  const typeMap = {
    0: 'warning',
    1: 'success',
    2: 'danger'
  }
  return typeMap[status] || 'info'
}

// 格式化途经点类型
const formatWaypointType = (type) => {
  const typeMap = {
    1: '终点',
    2: '途经点',
    3: '起点'
  }
  return typeMap[type] || '未知'
}

// 计算排序后的途经点
const sortedWaypoints = computed(() => {
  if (!orderInfo.value?.waypointInfoList) return []
  
  // 按waypointType排序：3(起点) -> 2(途经点) -> 1(终点)
  return [...orderInfo.value.waypointInfoList].sort((a, b) => {
    // 如果是起点，排在最前面
    if (a.waypointType === 3) return -1
    if (b.waypointType === 3) return 1
    // 如果是终点，排在最后面
    if (a.waypointType === 1) return 1
    if (b.waypointType === 1) return -1
    // 途经点按照waypointIndex排序
    return (a.waypointIndex || 0) - (b.waypointIndex || 0)
  })
})

// 页面加载时获取数据
onMounted(() => {
  fetchOrderDetail()
})
</script>

<style scoped>
.order-detail-container {
  padding: 20px;
}

.order-detail-card {
  min-height: calc(100vh - 100px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.title {
  font-size: 16px;
  font-weight: bold;
}

.order-number {
  font-family: monospace;
  color: #409EFF;
}

.amount {
  font-weight: bold;
  color: #67c23a;
}

.mt-20 {
  margin-top: 20px;
}

:deep(.el-descriptions__header) {
  margin-bottom: 20px;
}

:deep(.el-descriptions__title) {
  font-weight: bold;
  color: #303133;
}

:deep(.el-descriptions__label) {
  width: 120px;
  justify-content: flex-end;
  font-weight: bold;
}

:deep(.el-descriptions__content) {
  padding: 12px 16px;
}

:deep(.el-card__header) {
  padding: 15px 20px;
}

:deep(.el-steps) {
  padding: 20px;
}
</style> 